const webpack = require('webpack');
const path =require('path');
const {VueLoaderPlugin} = require('vue-loader');
const HTMLPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin'); //抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象。
const cssExtract = new ExtractTextPlugin('css/[name].[hash:5].css');//将拆分的css文件自动插入index.html中


const config = {
    // mode:'development',
    entry:{
        app:'./src/app.js',
        // search:'./src/search.js'
    },

    output:{
        filename:'js/[name].[hash].js',
        path:path.resolve(__dirname+ '/dist')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                loader: cssExtract.extract( 'css-loader' )
            },
            {
                test: /\.scss$/,
               loader: cssExtract.extract({ fallback: 'style-loader', use: 'css-loader!sass-loader' })
            },
            {
                
                test:/.vue$/,
                loader:'vue-loader'
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                use: ['file-loader']
            }
        
        ]
    },
    plugins: [
        
        new webpack.ProvidePlugin({
            jQuery: "jquery",
            $: "jquery"
        }),
        
        new HTMLPlugin({ //生成index.html文件
          template: 'index.html',
          filename: 'index.html'
        }),
         // 添加VueLoaderPlugin，以响应vue-loader
        new VueLoaderPlugin(),
        
        cssExtract //css文件处理
        

    ],
    resolve:{
        extensions: ['.js', '.vue', '.json'],
        alias:{
            'vue':'vue/dist/vue.esm.js',
            '@':path.resolve(__dirname,"src")
        }
    }
}
module.exports = config;